<template>
  <div class="main">
    <mine-title>我的模型</mine-title>
    <div class="content">
      <div class="block-header">
        <div class="block-header-left">
          <mine-button type="primary" secondary @click="loadData()"><i class="iconfont icon-reset-line"></i>刷新</mine-button>
        </div>
        <div class="block-header-right"></div>
      </div>
      <el-form ref="form" :inline="true" :model="listQuery" class="demo-form-inline">
        <el-row :gutter="2">
          <el-col :xs="12" :sm="8" :md="8" :lg="3">
            <el-form-item label="">
              <el-input
                v-model="listQuery.id"
                placeholder="模型ID"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="3">
            <el-form-item label="">
              <el-input
                v-model="listQuery.modelName"
                placeholder="模型名称"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="2">
            <el-form-item label="">
              <el-select
                v-model="listQuery.applicationTypes"
                placeholder=""
                multiple
                disabled
                size="small"
                collapse-tags
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item label="">
              <el-select
                v-model="listQuery.status"
                placeholder="发布状态"
                multiple
                size="small"
                collapse-tags
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item label="">
              <el-select
                v-model="listQuery.modelTypes"
                placeholder="模型类型"
                multiple
                size="small"
                collapse-tags
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="3">
            <el-form-item label="">
              <el-input
                v-model="listQuery.projectName"
                placeholder="关联项目"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="3">
            <el-form-item label="">
              <el-input
                v-model="listQuery.materialSetName"
                placeholder="数据集"
                size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        :max-height="300">
        <el-table-column prop="id" label="模型ID" show-overflow-tooltip />
        <el-table-column prop="modelName" label="模型名称" show-overflow-tooltip />
        <el-table-column prop="applicationType" label="应用类型" show-overflow-tooltip />
        <el-table-column prop="status" label="发布状态" :formatter="(row, column, cellValue, index) => { return cellValue === 'unpublish' ? '未发布' : '已发布'; }" show-overflow-tooltip />
        <el-table-column prop="modelType" label="模型类型" :formatter="(row, column, cellValue, index) => { return this.renderClassify(cellValue); }" show-overflow-tooltip />
        <el-table-column align="center" label="模型效果">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="关联项目" show-overflow-tooltip />
        <el-table-column prop="materialSetName" label="数据集" show-overflow-tooltip />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <mine-button size="mini" type="text" @click="handleViewDetail(scope.$index, scope.row)">查看模型详情</mine-button>
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination
        @numberChange="numberChange"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage">
      </mine-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/modules/index/utils/request';
import { classifyList } from '@/utils/common';
import qs from 'qs';
import _ from 'lodash';
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1, //table当前页数
      listQuery: {
        id: '',
        modelName: '',
        applicationTypes: ['云服务'],
        version: '',
        status: [],
        modelTypes: [],
        projectName: '',
        materialSetName: '',
      },
      loading: true,
      options: classifyList.map((item) => {
        return { value: item.name, label: item.text };
      }),
      options1: [{ value: '云服务', label: '云服务' }],
      options2: [
        { value: 'published', label: '已发布' },
        { value: 'unpublish', label: '未发布' },
      ],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData(flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const { currentPage, listQuery } = this;
      const {
        id,
        modelName,
        applicationTypes,
        version,
        status,
        modelTypes,
        projectName,
        materialSetName,
      } = listQuery;

      let data = qs.parse({
        page: currentPage,
        pageSize: 10,
        id: id,
        modelName: modelName,
        applicationTypes: applicationTypes,
        version: version,
        status: status,
        modelTypes: modelTypes,
        projectName: projectName,
        materialSetName: materialSetName,
      });
      this.loading = true;
      request({
        url: '/training-model-data/search-page', //接口
        method: 'post',
        data: data,
      }).then((response) => {
        let result = response.data;
        if (!result.success) {
          return;
        }
        let data = result.data;
        this.tableData = data.list;
        this.total = data.rowCount;
        this.loading = false;
      });
    },
    clear () {
      this.$refs.form.resetFields();
      this.loadData(true);
    },
    refreshData() {
      this.loadData();
    },
    reSetData() {
      this.listQuery = {
        id: '',
        modelName: '',
        applicationTypes: ['云服务'],
        version: '',
        status: [],
        modelTypes: [],
        projectName: '',
        materialSetName: '',
      };
      this.page = 1;
      this.refreshData();
    },
    formatBtn(row, column, cellValue, index) {
      return cellValue;
    },
    async handleDetail(index, row) {
      let data = null;
      try {
        data = await this.loadPro(row.projectId);
      } catch (err) {
        data = null;
      }
      this.$router.push({
        name: 'proEdit',
        params: { data: data, isToModelResult: true },
      });
    },
    loadPro(id) {
      return new Promise((resolve, reject) => {
        request({
          url: `/project/${id}`, //接口
          method: 'get',
        })
          .then((res) => {
            if (res.data.success) {
              if (res.data.data) {
                resolve(res.data.data);
              }
              reject(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
              reject(res.data.msg);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    handleViewDetail(index, row) {
      this.$router.push({
        name: 'proDetail',
        query: { id: row.projectId },
      });
    },
    handleCurrentChange(value) {
      this.page = value;
      this.loadData();
    },
    renderClassify(value) {
      let result = '';
      result = _.find(classifyList, { name: value })
        ? _.find(classifyList, { name: value }).text
        : '';
      return result;
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.demo-form-inline {
  margin-bottom: 22px;
  .el-form-item {
    margin-bottom: 0;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}
</style>
